<template>
  <div class="item-card">
    <div :class="{'item-d-card': device === 'desktop', 'item-p-card': device === 'ipad', 'item-m-card': device === 'mobile'} ">
      <el-card class="project-item" shadow="hover">
        <img src="../../assets/image/TransBIM/four/project1.png" class="project1">
        <div class="project-item-title">
          上海市浦东新区
        </div>
        <div class="project-item-summary">项目位于上海市浦东新区，总用地面积6w平方米，容积率2.0总计容工程面积12万平方米，设计范围：用地范围内总体、住宅单体、保障房、公建配套设施、设备辅助用房等，以高层住宅为主，辅以多层住宅。通过对招标图的成果交付，在方案阶段就严控设计方案、把控设计参数、确定设计思路的模式，后续繁琐的设计工作程序自动化快速呈现设计成果。</div>
        <el-button type="text" @click="showDetail">查看详情</el-button>
      </el-card>
    </div>
  </div>
</template>

<script>
import drawImg from '@/components/Drawimg'
import { mapState } from 'vuex'
export default {
  components: {},
  data() {
    return {}
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device
    })
  },
  mounted() {},
  methods: {
    showDetail() {
        this.$emit('showDetail')
    }
  }
}
</script>
<style lang="scss" scoped>
.item-card{
   .item-d-card{
    :deep(.project-item) {
        border-radius: 20px;
        margin: 40px 0;
        cursor: pointer;
        img {
            width: 100%;
            max-height: 200px;
        }
        .project-item-title {
            margin-top: 20px;
            margin-bottom: 0;
            color: #262626;
            font-weight: 400;
            font-size: 24px;
            line-height: 28px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .project-item-summary {
            position: relative;
            margin-top: 12px;
            color: #595959;
            font-size: 16px;
            max-height: 3em;
            margin-right: -1em;
            padding-right: 1em;
            overflow: hidden;
            line-height: 1.5em;
            text-align: justify;
            &:before {
                position: absolute;
                right: 14px;
                bottom: 0;
                padding: 0 1px;
                background: #fff;
                content: "...";
            }
        }
    }
   }
}
</style>
